<template>
  <!-- 区块的实现-->

  <div
    v-if="element && element.key"
    class="widget-block-view drag-widget"
    :class="{
      active: selectWidget.key == element.key,
      is_req: element.options.required
    }"
    @click.stop="handleSelectWidget(index)"
    style="width:99.9%"
  >
    <el-col
      :span="element.options.span < 6 ? 6 : element.options.span"
      :label="element.name"
    >
      <el-form-item
        class="widget-view "
        v-if="
          element &&
            element.key &&
            element.type != 'divider' &&
            element.type != 'block' &&
            element.type != 'editor'
        "
        :class="{
          active: selectWidget.key == element.key,
          is_req: element.options.required
        }"
        :label="element.name"
        @click.native.stop="handleSelectWidget(index)"
      >
        <widget-element-item
          :element="element"
          is-table="block"
        ></widget-element-item>
        <div class="widget-view-action" v-if="selectWidget.key == element.key">
          <!-- 复制, 删除图标 -->
          <button type="button" class="show-circle action-clone">
            <i
              class="iconfont icon-icon_clone"
              @click.stop="handleWidgetClone(index)"
            ></i>
          </button>
          <button type="button" class="show-circle action-delete">
            <i
              class="iconfont icon-trash"
              @click.stop="handleWidgetDelete(index)"
            ></i>
          </button>
        </div>

        <!--              <div class="widget-view-drag" v-if="selectWidget.key == element.key">
                    <i class="iconfont icon-drag drag-widget"></i>
                </div> -->
      </el-form-item>
    </el-col>
  </div>
</template>

<script>
import WidgetElementItem from "./WidgetElementItem";
export default {
  components: {
    WidgetElementItem
  },
  props: ["element", "select", "index", "data"],
  data() {
    return {
      selectWidget: this.select
    };
  },
  methods: {
    handleSelectWidget(index) {
      this.selectWidget = this.data[index];
    },
    handleWidgetDelete(index) {
      if (this.data.length == 1) {
        this.$emit("select-change", -1);
      } else {
        if (this.data.length - 1 == index) {
          this.$emit("select-change", index - 1);
        } else {
          this.$emit("select-change", index);
        }
      }

      this.$nextTick(() => {
        this.data.splice(index, 1);
      });
    },
    handleWidgetClone(index) {
      const key = new Date().getTime() + "";
      let cloneData = {
        ...this.data[index],
        options: { ...this.data[index].options },
        key,
        model: this.data[index].type + key
      };

      if (Object.keys(this.data[index].options).includes("options")) {
        cloneData = {
          ...cloneData,
          options: {
            ...cloneData.options,
            options: cloneData.options.options.map(item => ({ ...item }))
          }
        };
      }

      this.data.splice(index, 0, cloneData);

      this.$nextTick(() => {
        this.selectWidget = this.data[index + 1];
      });
    }
  },
  watch: {
    select(val) {
      this.selectWidget = val;
    },
    selectWidget: {
      handler(val) {
        this.$emit("update:select", val);
      },
      deep: true
    }
  }
};
</script>
